<template>
  <div class="w-full h-full bg-white rounded-xl mr-2.5 p-3">
    <section-header title="处理时长" icon="calendar"/>

    <div class="h-5/6 text-center">
      <!-- 原材料入库处理时长 -->
      <div class="w-full h-1/2 mb-10">
        <section-title title="原材料入库处理时长" icon="lishijilu"/>
        
        <el-form :inline="true" :model="form" size="small" class="flex align-center my-3">
          <el-form-item class="label" label="收料单">
            <el-input v-model="form.docNo" size="small" placeholder="收料单编码" clearable class="custom-input"/>
          </el-form-item>
          <el-form-item class="label" label="入库单">
            <el-input v-model="form.docNo1" size="small" placeholder="入库单编码" clearable class="custom-input"/>
          </el-form-item>
          <el-button icon="Search" class="buttons" size="small" type="primary" @click="searchMaterialList">查询</el-button>
        </el-form>

        <auto-scroll-list 
          ref="materialScrollRef"
          height="calc(88% - 10px)"
          :isEmpty="!materialList.length"
          :scrollSpeed="0.05"
          @scroll-complete="handleMaterialScrollComplete"
        >
          <processing-item
            v-for="(item,index) in materialList"
            :key="index"
            :data="item"
          />
        </auto-scroll-list>
      </div>

      <!-- 分布式调入处理时长 -->
      <div class="w-full h-1/2">
        <section-title title="分布式调入处理时长" icon="lishijilu"/>
        
        <el-form :inline="true" :model="transferForm" size="small" class="flex align-center my-3">
          <el-form-item class="label" label="调出单">
            <el-input v-model="transferForm.docNo" size="small" placeholder="调出单编码" clearable class="custom-input"/>
          </el-form-item>
          <el-form-item class="label" label="调入单">
            <el-input v-model="transferForm.docNo1" size="small" placeholder="调入单编码" clearable class="custom-input"/>
          </el-form-item>
          <el-button icon="Search" class="buttons" size="small" type="primary" @click="searchTransferList">查询</el-button>
        </el-form>

        <auto-scroll-list
          ref="transferScrollRef"
          height="calc(88% - 10px)"
          :isEmpty="!transferList.length"
          :scrollSpeed="0.05"
          @scroll-complete="handleTransferScrollComplete"
        >
          <processing-item-list
            v-for="(item,index) in transferList"
            :key="index"
            :data="item"
          />
        </auto-scroll-list>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, onUnmounted, nextTick } from 'vue'
import { getRealtimeDataStep, getReceiptInstock } from '@/api/warehouseEntryApi'
import ProcessingItem from './processingItem.vue'
import ProcessingItemList from './processingItemList.vue'
import AutoScrollList from '@/components/AutoScrollList.vue'
import SectionHeader from './SectionHeader.vue'
import SectionTitle from './SectionTitle.vue'

const form = reactive({ docNo: '', docNo1: '' })
const transferForm = reactive({ docNo: '', docNo1: '' })
const materialList = ref([])
const transferList = ref([])
const materialScrollRef = ref(null)
const transferScrollRef = ref(null)
const dataRefreshInterval = ref(null)

const getMaterialList = async () => {
  try {
    const { data } = await getReceiptInstock(form)
    materialList.value = data
    await nextTick()
    if (materialList.value.length > 0) {
      materialScrollRef.value?.startAutoScroll()
    }
  } catch (e) {
    console.error('Failed to get material list:', e)
  }
}

const getTransferList = async () => {
  try {
    const { data } = await getRealtimeDataStep(transferForm)
    transferList.value = data
    await nextTick()
    if (transferList.value.length > 0) {
      transferScrollRef.value?.startAutoScroll()
    }
  } catch (e) {
    console.error('Failed to get transfer list:', e)
  }
}

const searchMaterialList = async () => {
  materialScrollRef.value?.stopAutoScroll()
  await getMaterialList()
}

const searchTransferList = async () => {
  transferScrollRef.value?.stopAutoScroll()
  await getTransferList()
}

const handleMaterialScrollComplete = () => {
  if (materialList.value.length > 0) {
    materialScrollRef.value?.startAutoScroll()
  }
}

const handleTransferScrollComplete = () => {
  if (transferList.value.length > 0) {
    transferScrollRef.value?.startAutoScroll()
  }
}

const startDataRefresh = () => {
  stopDataRefresh()
  dataRefreshInterval.value = setInterval(async () => {
    if (materialList.value.length > 0) {
      materialScrollRef.value?.stopAutoScroll()
    }
    if (transferList.value.length > 0) {
      transferScrollRef.value?.stopAutoScroll()
    }
    await Promise.all([getMaterialList(), getTransferList()])
  }, 5000)
}

const stopDataRefresh = () => {
  if (dataRefreshInterval.value) {
    clearInterval(dataRefreshInterval.value)
    dataRefreshInterval.value = null
  }
}

onMounted(async () => {
  await Promise.all([getMaterialList(), getTransferList()])
  startDataRefresh()
})

onUnmounted(() => {
  stopDataRefresh()
  materialScrollRef.value?.stopAutoScroll()
  transferScrollRef.value?.stopAutoScroll()
})
</script>

<style scoped>
.custom-input {
  width: 150px;
}

.buttons {
  margin-left: 10px;
}

:deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 10px;
}

:deep(.el-form-item__label) {
  color: #666;
}
</style>
